/**
 * 成长记录-教师、家长端
 * Created by xxx on 2017/7/13.
 */
'use strict';
import React, {
    Component
} from 'react'
import {
    Link
} from 'react-router'
import {
    HttpService,
    getLocalTime,
    Tips,
    AjaxUploadImgUrl,
    getDefaultImg,
    lazyLoad
} from '../Tools'

import Header from './Common/Header'
import LoadingBox from './Common/LoadingBox'

import lazyImg from '../Img/other/albumDefault.png';

export default class GrowthRecord extends Component {
    constructor(props) {
        super(props);
        this.page = 1;
        this.pagesize = 10;
        this.toBottom = 100;
        this.state = {
            dataList: [], //列表的数据
            dataLoad: 1, //加载中
            dataEnd: 0, //加载结束
            dataNull: 0 //加载返回空
        }
    }

    componentWillMount() {
        this.getGrowthRecord();
    }

    componentDidMount() {
        window.onscroll = () => {
            const {
                dataLoad,
                dataEnd,
                dataNull
            } = this.state;
            if (dataLoad == 1 || dataEnd == 1 || dataNull == 1)
                return;
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            if (document.body.clientHeight - window.innerHeight - scrollTop <= this.toBottom) {
                this.page++;
                this.getGrowthRecord();
            }
        };
    }

    getGrowthRecord(async = true) {
        this.setState({
            dataLoad: 1,
            dataEnd: 0,
            dataNull: 0
        });
        HttpService.query({
            url: '/jxt-commonbackground/ajaxGrowup.do',
            data: {
                currentPage: this.page,
                listcount: this.pagesize,
                jybTicket: sessionStorage.ticket,
                type: sessionStorage.userrole == '家长' ? 'get' : 'post',
                method: 'ajaxJybJSON_001QryCzjl'
            },
            async,
            success: (res => {
                this.setState({
                    dataLoad: 0
                });
                console.log(res)
                if (res.code == 0) {
                    //获取数据成功
                    let newData = this.state.dataList.concat(res.r.czjlList);
                    this.setState({
                        dataList: newData
                    });
                    if (res.r.totalRecordCount == this.pagesize) {
                        this.setState({
                            dataEnd: 1
                        });
                    } else if (res.r.czjlList.length < this.pagesize) {
                        this.setState({
                            dataEnd: 1
                        });
                        if (newData.length == 0) {
                            this.setState({
                                dataEnd: 0,
                                dataNull: 1
                            });
                        }
                    }
                    lazyLoad(document.querySelector('.growth_record_content'));
                    return;
                }
                Tips(res.msg);
            })
        })
    }

    render() {
        const headerLink = <Link to="/AddGrowthRecord" className='h_link add_blue'/>;
        const {
            dataLoad,
            dataEnd,
            dataNull,
            dataList
        } = this.state;
        const growthRecordList = dataList.map((item, index) => {
            const timeStr = getLocalTime(item.zzCreateDate);
            return (
                <Link className="content_list" to={'/GrowthRecordDetails/'+item.id}>
                    <img src={getDefaultImg()} className="list_header_img" />
                    <div className="list_info">
                        <span className="username right_green">{item.username}</span>
                        <span className="content">{item.content}</span>
                        {
                            item.uploadfilepic != null?
                                <div className="showImg_div" style={{backgroundImage:'url('+AjaxUploadImgUrl + item.uploadfilepic+')'}}><img className="showImg"  data-src={AjaxUploadImgUrl+item.uploadfilepic} src={lazyImg} /></div>
                                :''
                        }
                        <span className="time">{timeStr}</span>
                    </div>
                </Link>
            )
        });
        return (
            <div className='growth_record_page' >
                <Header title='成长记录' link={headerLink} appLink='1' />
                <div className="growth_record_content ">
                    {growthRecordList}
                </div>
                <LoadingBox dataLoad={dataLoad} dataNull={dataNull} dataEnd={dataEnd}/>
            </div>
        )
    }
}
